<!doctype html>
<html>
  <meta charset="utf-8" />
  <script>
    var tools = function () {
      
      return {
        addEvent: function (o, e, f) {
          return o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function () {f.call(o)});
        },
        $: function (id) {
          return typeof id == 'string' ? document.getElementById(id) : id;
        }
      }
    }();
  </script>
  <script src="integer_roman_conversion.js"></script>
  <style>
    .doc {
      width: 70%;
      margin: 0 auto;
      font-family: Georgia;
      color: #464646;
    }
    textarea {
      width: 100%;
      height: 200px;
    }
    span {color: #8B0000}
  </style>
  <body>
    <div class="doc">
      <h1>romanToInt & intToRoman</h1>
      <h2>(within the range from 1 to 3999)</h2>
      <textarea id="text"></textarea>
      <p>
        <input type="radio" checked='checked' name='radio' id='rad' /> romanToInt
        <input type="radio" name='radio' /> intToRoman
        <button id="btn">Go</button>
      </p>
    <div>
      <span>result:</span><br/>
      <p id="result"></p>
    </div>
    </div>
    
    <script>
      (function () {
        var $text, $rad, $btn, $result;
        
        function init () {
          var $ = tools.$;
          $text = $('text');
          $rad = $('rad');
          $btn = $('btn');
          $result = $('result');
          bind();
        }


        function bind() {
          tools.addEvent($btn, 'click', function (e) {
            var val = $text.value
              , method = $rad.checked ? 'romanToInt' : 'intToRoman';
            $result.innerHTML = window[method](val);
          })
        }
        
        tools.addEvent(window, 'load', init);
      })();
    </script>
  </body>
</html>